<template>
  <div class="sidebar-menu">
    <el-menu :default-active="$route.path" mode="vertical" @select="handleMenuSelect">
      <template v-for="item in menuItems">
        <el-submenu :index="item.path" v-if="item.children" :key="item.path" :disabled="!isLoggedIn">
          <template #title>
            <img :src="item.icon" class="menu-icon">
            <span class="item-title">{{ item.title }}</span>
          </template>
          <el-menu-item :index="subItem.path" v-for="subItem in item.children" :key="subItem.path"
            :disabled="!isLoggedIn">
            <span class="subItem-title">{{ subItem.title }}</span>
          </el-menu-item>
        </el-submenu>
        <el-menu-item :index="item.path" v-if="!item.children" :key="item.path" :disabled="!isLoggedIn">
          <img :src="item.icon" class="menu-icon">
          <span class="item-title">{{ item.title }}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script>
import menuItems from '../utils/menuItems.js'; // 引入 menuItems

export default {
  data() {
    return {
      menuItems, // 使用引入的 menuItems
    };
  },
  computed: {
    isLoggedIn() {
      return localStorage.getItem('isLoggedIn') === 'true';
    }
  },
  methods: {
    handleMenuSelect(key) {
      if (this.isLoggedIn) {
        this.$emit('menu-item-clicked', this.findMenuItemByPath(key));
      }
    },
    findMenuItemByPath(path) {
      for (const item of this.menuItems) {
        if (item.path === path) {
          return item;
        }
        if (item.children) {
          for (const subItem of item.children) {
            if (subItem.path === path) {
              return subItem;
            }
          }
        }
      }
      return null;

    },
  },
};
</script>

<style scoped>
.sidebar-menu {
  position: fixed;
  top: 56px;
  left: 0;
  z-index: 5;
  /* padding-top: 60px; */
  width: 200px;
  color: #2c2c2c;
}

.item-title {
  font-size: 17px;
  padding: 10px;
  margin-right: 20px;
}

.subItem-title {
  font-size: 14px;
  display: block;
  padding: 2px 20px;
}

:deep(.el-menu-item.is-active) {
  background-color: #F9FAFB;
  border-right: 1px solid #e0e0e0;
}

.menu-icon {
  width: 20px;
  height: 20px;
  margin-right: 5px;
  vertical-align: middle;
  text-align: left;
}

:deep(.el-submenu__title) {
  width: 200px;
}

:deep(.el-menu-item[disabled], .el-submenu[disabled] .el-submenu__title) {
  color: #999;
  cursor: not-allowed;
  opacity: 0.6;
}
:deep(.el-menu){
  overflow: hidden;
  height: 800px;
}
</style>